5.01. Консоль, отладка и боль
Консоль, отладка и боль
Обработка исключений: try...catch...finally
Метки и with (устаревшее)
Хотелось бы отметить, что JavaScript на практике не всегда такой «чёткий», как в теории. Вроде бы логично - блоки кода, наборы функций, циклов, операторов и переменных, которые работают с элементами и прочими объектами, позволяют взаимодействовать с другими компонентами сайта или приложения. Но сам код написать намного легче - сложнее его отладить.
Отладка — это неотъемлемая часть разработки на JavaScript. Благодаря инструментам разработчика (DevTools), доступным в современных браузерах (Chrome, Firefox, Edge и др.), можно легко находить ошибки, анализировать выполнение кода, проверять значения переменных и определять, почему тот или иной участок кода работает некорректно.
Как мы уже отмечали, в браузере это открывается через меню или по горячей клавише F12, либо Ctrl+Shift+I (Cmd+Option+I на macOS). Когда мы пишем «console.log()», мы вызываем объект консоли и его метод log(), в который передаём значение — это можно использовать в качестве простейшего способа проверки запускаемости метода - на практике можно в сомнительные функции добавить вывод значения, к примеру, переменной, в консоль. Если вывода не произошло - значит функция не вызвана, а если значение переменной - undefined, значит получили его некорректно. Но это лишь пример.
Выводить можно не только log(), но и ошибки, предупреждения - console.error(), console.warn() и т.д., а для красивого вывода массивов и объектов есть console.table().
И консоль — это не только вывод, но и ввод - можно выполнять произвольный JavaScript прямо в консоли, искать элементы DOM ($0, document.querySelector(), document.getElementById()), получать значения переменных.
Учебник https://learn.javascript.ru/ приводит замечательный пример работы консоли - для этого нужно открыть страницу по ссылке:
https://learn.javascript.ru/article/devtools/bug.html
Тут можно увидеть, что в HTML-коде подключен скрипт через <script>, и в содержимом тега указано «lalala», и если открыть консоль, то будет видна ошибка - lalala is not defined. Так и работает работа с ошибками в консоли - если в скрипте есть проблема, то отлаживается она именно так - и обратите внимание, несмотря на проблему, страница открывается.
Часто JS-код разделён на несколько файлов. Чтобы найти нужный, нужно во вкладке Sources (Источники) просмотреть структуру проекта слева, использовать поиск по файлам (Ctrl+P), а для поиска конкретного кода можно использовать Ctrl+F внутри файла или глобальный поиск по всем файлам. Это используется для нахождения нужного фрагмента кода - к примеру, там тысячи строк, и вам нужна конкретная функция - вы просто ищете её в поиске, переходите к ней и работаете.
Если нужно понять, какой код вызывается при нажатии на кнопку, можно навести на элемент в DOM (через «Элементы»/ «Elements») - там будут указаны обработчики событий.
Когда я сказал «работаете», я имел в виду обработку нужной нам функции. К примеру, мы хотим выяснить, всё ли работает как надо - тут нужна установка точки останова (Breakpoints). Точка останова позволяет приостановить выполнение скрипта на определённой строке кода. Это помогает проанализировать состояние программы «в реальном времени».
Во вкладке «Источники», когда мы нашли нужный JS-файл, нужную строку с функцией - нужно кликнуть по номеру строки слева - появится синяя точка. При выполнении кода браузер остановится на этой строке, и это позволит просмотреть текущие значения переменных, пошагово выполнять код (Step Over / Step Into), продолжать выполнение.
Помните, мы говорили о том, что JS интерпретируемый и работает построчно? Вот так это и можно увидеть - когда запускаете код, он выполняется строка за строкой, и через отладку можно отследить, словно поэтапно выслеживая - «…так, строка успешна, следующая тоже успешна, а тут проблема!» и при выявлении некорректного поведения можно идти править код.
Альтернативный способ (без поиска файла в консоли) — это debugger. Прямо в код можно добавить строку:
debugger;
Браузер остановится на этом месте, если DevTools открыт, и можно пошагово продолжать выполнение.
В консоли можно напрямую вызвать любую функцию, если она доступна в текущей области видимости, допустим указав «myFunction()». А чтобы проверить, существует ли функция, можно и написать проверки, к примеру:
typeof myFunction === 'function' ? console.log("Функция есть") : console.log("Функции нет");
Для поиска методов объекта:
console.dir(myObject); // покажет все свойства и методы
Используйте автодополнение в консоли: наберите имя объекта и точку — появится выпадающий список методов и свойств.
Какие ещё можно дать советы при отладке? Проверяйте порядок загрузки скриптов — может быть, функция не определена, потому что скрипт ещё не загружен. Следите за асинхронностью — если данные приходят из fetch/ajax, то переменная может быть undefined до окончания запроса. Не забывайте очищать кэш и делать перезагрузку — иногда старый JS мешает работе нового кода. В режиме разработчика можно нажать правой кнопкой мыши на кнопку обновления в браузере и выполнить жёсткую перезагрузку с очисткой кеша.